<!DOCTYPE html>
<html lang="zh"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery3.6.0-min.js}"></script>
</head>
<body>
    <h1>查看菜品</h1>
    <form id="eachForm" th:action="@{/menu/show_menu}">
        <input id="current" type="hidden" name="current" value="1">
<!--        <input type="hidden" name="size" value="4">-->

    </form>
    <table>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>点赞数</th>
            <th>功能</th>
        </tr>
        <tr th:each="menu,stat : ${result.obj}">
            <td th:text="${stat.count}"></td>
            <td th:text="${menu.name}"></td>
            <td th:text="${menu.price}"></td>
            <td th:text="${menu.zan}"></td>
            <td>
                <a th:href="@{show_menu/{id}(id=${menu.id})}">查看详情</a>
            </td>
        </tr>
    </table>
    <div>
        <!-- 显示翻页数据        -->
        <span>每页<span th:text="${pager.size}"></span>条</span>
        <span>/共<span th:text="${pager.total}"></span>条</span>
        <span>当前 <span th:text="${pager.current}"></span>页</span>
        <span>共 <span th:text="${pager.pages}"></span>页</span>

        <!--将Thymeleaf中接受到的数据传入事件-->
        <button onclick="goPage(1)">首页</button>
        <button th:pageCurrent="${pager.current}-1" onclick="goPage(this.getAttribute('pageCurrent'))">上一页</button>
        <button th:pageCurrent="${pager.current}+1" onclick="goPage(this.getAttribute('pageCurrent'))">下一页</button>
        <button th:pageCurrent="${pager.pages}" onclick="goPage(this.getAttribute('pageCurrent'))">末页</button>
    </div>
    <script>
        function goPage(index){
            //JS中获取Thymeleaf中的数据
            var pagePages = [[${pager.pages}]]

            //设置分页限制，不超出首页和最终页
            if (index < 1){
                index = 1;
            }
            if (index >= pagePages){
                index = pagePages;
            }
            //设置要翻页的值
            $("[name='current']").val(index);
            //提交表单
            $("#eachForm").submit();
        }

    </script>
</body>
</html>